import React from 'react';
import { List, Avatar } from 'antd';
import { useChatStore } from '@/store/ChatStore';
import './ChatHistory.css';
import { LeftOutlined } from '@ant-design/icons';

const ChatHistory: React.FC = () => {
  const { chats, selectedChatId, selectChat } = useChatStore();

  return (
    <div className="unique-chat-history">
      <div className="history-back-button" >
      <LeftOutlined className="back-icon" />
      <span className="history-back-text">返回上一级</span>
    </div>
    <div className='history-lookup-title'>
    <span>消息中心</span>
    </div>
      <List
        itemLayout="horizontal"
        dataSource={chats}
        renderItem={(chat) => (
          <List.Item style={{ padding: 0, height:'120px',marginLeft:'-18px',marginRight:'-20px'}}
            className={selectedChatId === chat.id ? 'selected' : ''}
            onClick={() => selectChat(chat.id)}
          >
            <List.Item.Meta 
              avatar={<Avatar src={chat.avator} style={{width:'40px',height:'40px', marginLeft:'10px'}}/>}
              title={
                <div style={{ display: 'flex', justifyContent: 'space-between',fontSize:'20px', fontWeight:'normal', color:'#101010'}}>
                  <span>{chat.title}</span>
                  <span style={{ color: '#83838f', fontSize: '1rem',marginRight:'10px' }}>
                    {chat.date}
                  </span>
                </div>
              }
              
              description={
                <div style={{ color:'#101010', fontSize:'20px',maxWidth:'215px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                <span>{chat.messages[chat.messages.length - 1].message}</span>
                </div>
                }
            />
          </List.Item>
        )}
      />
    </div>
  );
};

export default ChatHistory;
